<script setup>
import { ref } from 'vue';
import commonAside from '../components/CommonAside.vue';
import commonHeader from '../components/CommonHeader.vue';

const isCollapse = ref(false);
const changeCollapse = collapse => {
    console.log(collapse)
    isCollapse.value = collapse;
}

</script>
<template>
    <div class="common-layout">
      <el-container class="common-container">
        <el-aside class="common-aside">
            <common-aside :isCollapse="isCollapse"></common-aside>
        </el-aside>
        <el-container>
          <el-header class="common-header">
            <common-header @changeCollapse="changeCollapse"></common-header>
          </el-header>
          <el-main class="common-main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <style lang="scss" scoped>
  .common-layout {
    height: 100%;
    .common-container {
        height: 100%;
        .common-aside {
            width: auto;
        }
        .common-header {
            height: 80px;
            padding: 0;
            display: flex;
        }
        .common-main {
            padding: 0;
        }
    }
  }
  </style>